<template>
  <div class="deposit-proxy-wrap">

    <div class="bank-box">
      <div class="icon"><img src="./bank.png" class="bank" onclick="return false"/></div>
      <div class="bank-info">
        <div class="bank-name" v-model="bankName">{{bankName}}</div>
        <div class="bank-num">尾号<span v-model="bankNumber">{{bankNumber}}</span><span
          v-model="cardType">{{cardType}}</span></div>
      </div>
    </div>

    <div class="balance-box">

      <div class="withdraw-btn">
        <div class="balance">可提现金额：<span v-model="balance">{{balance}}</span>元</div>
        <div class="btn">
          <button type="button" class="total" @click="totalMoney">全部提现</button>
        </div>
      </div>

      <div class="money-box"><span :class="{'icon':money}">￥</span>
        <input type="text" class="money" placeholder="提现金额最低20元" v-model="money" v-on:input="checkMoney"
               oninput="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
               maxlength="9"/>
        <div class="del-icon" v-if="showIcon" @click="clearMoney"><img src="../../images/close.png" class="delete"
                                                                       onclick="return false"/></div>
      </div>

      <div class="title" v-if="outBalance">金额超出可提余额</div>
      <div class="title" v-else>手续费{{chargeMoney}}元
        <span v-show="showCharge">，实际到账{{practicalMoney}}元</span>
      </div>

    </div>

    <div class="deposit-box">
      <button type="button" class="deposit" @click="deposit">确定</button>
    </div>

    <div class="tip-box">
      <p>提现说明：</p>
      <div class="tip-msg" v-html="showRemark" v-if="showRemark"></div>
    </div>

    <div class="auth_tx_bck" v-if="showKey">
      <div class="popup_box">
        <div class="popup_top" @click="closeModal"><img src="../../images/close_diff.png" class="close"
                                                        onclick="return false"></div>
        <div class="pop_u_box">
          <div class="pop_f">请输入提现密码</div>
          <div class="pop_moy">金额<span class="icon2">{{money}}</span>元将提现至尾号为{{bankNumber}}{{bankName}}，请注意查收</div>
        </div>
        <div class="pop_mpb">
          <div class="p_m_list" v-for="i in items" :class="password[i]?'mmdd':''"></div>
        </div>
        <div class="pop_moy" @click="forgetPwd">忘记密码？</div>
      </div>
      <div class="numb_box">
        <div class="xia_q_tb">
          <img src="./pull.jpg" class="pull" onclick="return false">
        </div>
        <ul class="nub_ggg">
          <li @click="keyUpHandle($event)" v-for="val in keys" v-if="val!='清空'">
            <a href="javascript:void(0);">{{ val }}</a>
          </li>
          <li v-else @click="clearPwdHandle">
            <a href="javascript:void(0);">清空</a>
          </li>
          <li @click="delHandle">
            <a href="javascript:void(0);">删除</a>
          </li>
        </ul>
      </div>
    </div>

    <v-dialog v-model="sendVal" :content="content" cancelText="忘记密码" confirmText="重新输入" @confirm="retry"
              @cancel="forgetPwd"></v-dialog>

    <v-dialog v-model="modalVal" :content="modal" type="default" @sure="sure"></v-dialog>

  </div>
</template>

<script>
  import {setSessionStore, toDecimal} from '../../config/util'
  import Cookies from 'js-cookie'
  import md5 from 'js-md5'
  import dialog from '../../components/dialog'
  import {queryIsBindCard, withDrawDeposit} from "../../axios/api";
  import {salt} from "../../config/env";

  const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "清空", 0];

  export default {
    data() {
      return {
        money: "",
        showIcon: false,
        bankName: "",
        bankNumber: "",
        cardType: "",
        balance: "",
        outBalance: false,
        showKey: false,
        items: [0, 1, 2, 3, 4, 5],
        password: [],
        keys: keys(),
        sendVal: false,
        modalVal: false,
        content: "",
        modal: "",
        userMark: "",
        chargeMoney: "",
        practicalMoney: "",
        showCharge: false,
        showRemark: "",
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
      this.getIsBindCard();
    },
    methods: {
      getIsBindCard() {//查询是否绑银行卡
        let params = {
          "sgin": this.userMark
        };
        queryIsBindCard(params).then((res) => {
          if (res.code == 0 && res.data != null) {
            if (res.data.type == 0) {//0为可以提现,1为没有绑定银行卡
              this.bankName = res.data.bankName;//银行卡卡号
              this.bankNumber = res.data.bankNumber;//银行卡名称
              this.cardType = res.data.cardType;//银行卡类型
              sessionStorage.setItem("proxy_sys_phone", res.data.phone);//手机号
              this.chargeMoney = res.data.chargeMoney;//提现手续费用
              this.showRemark = res.data.remark.replace(/\n/g, "<br/>");//提现手续费说明
              this.balance = toDecimal(res.data.walletMoney);//钱包金额
            }
          }
        });
      },
      checkMoney() {//检验金额
        let num = this.money
        if (eval(num) > eval(this.balance)) {
          this.outBalance = true;
          this.showIcon = true;
        } else {
          this.outBalance = false;
          this.showIcon = false;
          this.practicalMoney = Math.round(parseFloat((num - this.chargeMoney).toString()) * 100) / 100;
          this.showCharge = (eval(num) > eval(this.chargeMoney)) ? true : false;
        }
      },
      clearMoney() {//清除
        this.money = "";
        this.outBalance = false;
        this.showCharge = false;
        this.showIcon = false;
      },
      totalMoney() {//全部提现
        this.money = this.balance;
        this.practicalMoney = Math.round(parseFloat((this.money - this.chargeMoney).toString()) * 100) / 100;
        this.showCharge = (eval(this.balance) > eval(this.chargeMoney)) ? true : false;
      },
      deposit() {//确定
        let money = this.money;
        let balance = this.balance;
        let reg = /^([1-9]\d{0,9}|0)([.]?|(\.\d{1,2})?)$/;
        if (money == "" || money == null) {
          this.$vux.toast.text("请输入提现金额", "middle");
          return;
        } else if (money == 0 || !reg.test(money)) {
          this.$vux.toast.text("请输入正确的金额", "middle");
          return;
        } else if (eval(money) > eval(balance)) {
          this.$vux.toast.text("金额超出可提余额", "middle");
          return;
        } else if (eval(money) < 20.00) {
          this.$vux.toast.text("提现金额最低20.00元", "middle");
          return;
        } else {
          this.money = toDecimal(this.money);
          this.showKey = true;
        }
      },
      keyUpHandle(e) {
        let text = e.currentTarget.innerText;
        let len = this.password.length;
        if (!text || len >= 6) return;
        this.password.push(text);
        this.withDrawPwdCheck();
      },
      delHandle() {//删除
        if (this.password.length <= 0)
          return false;
        this.password.pop();
      },
      clearPwdHandle() {//清空
        this.password = [];
      },
      closeModal() {//关闭密码键盘
        this.showKey = false;
        this.password = [];
      },
      withDrawPwdCheck() {//提现密码校验
        if (this.password.length >= 6) {
          let withPwd = this.password.join(' ').replace(/\s/g, '');
          //判断本地存储密码次数为3次并且cookie中存储的值为null时,就把本地存储的次数清除(cookie10分钟失效后要把本地存储的密码次数删除)
          if (localStorage.getItem("sess_time_local") == 3 && Cookies.get("sess_time_local") == null) {
            localStorage.removeItem("sess_time_local");
          }
          let sess_time = localStorage.getItem("sess_time_local"); //当前密码错误次数就等于本地存储的次数,牵扯到提现密码的页面都会记录并且每次叠加,直接赋值
          if (Cookies.get("sess_time_local") == 3) { //密码错误次数过多
            this.modalVal = true;
            this.modal = "密码输入错误次数过多，请10分钟后再试";
            return;
          } else {//提现
            this.$vux.loading.show({
              text: '加载中',
            });

            let data = {
              "sgin": this.userMark,
              "money": this.money,
              "drawPwd": md5(md5(withPwd) + salt)
            };

            withDrawDeposit(data).then((res) => {
              this.$vux.loading.hide();
              this.showKey = false;
              this.password = [];
              if (res.code == 0) {
                if (res.data > 0) {
                  let depositId = res.data;
                  this.$router.push({path: '/depositSuccess', query: {"depositId": depositId}});
                } else {
                  this.$vux.toast.text("提现申请失败，请稍后重试", "middle");
                  return;
                }
              } else if (res.code == 20027) {//身份验证失败,记录错误提现密码次数
                sess_time++;
                localStorage.setItem("sess_time_local", sess_time);
                if (sess_time == 3) { //错误次数达到3次
                  let date = new Date();
                  date.setTime(date.getTime() + 60 * 1000 * 10); //过期为10分钟
                  Cookies.set('sess_time_local', sess_time, {expires: date, path: ''});
                  this.modalVal = true;
                  this.modal = "密码输入错误3次，请10分钟后再试";
                } else { //密码错误次数提醒
                  this.sendVal = true;
                  this.content = "提现密码错误,请重试,还剩" + parseInt(3 - sess_time) + "次机会";
                }
              } else {
                this.$vux.toast.text(res.msg, "middle");
              }
            });
          }
        }
        return false;
      },
      retry() {//重试
        this.sendVal = false;
        this.showKey = true;
      },
      forgetPwd() {//忘记密码
        setSessionStore("proxy_mark_01", 8002);
        this.$router.push("/authDrawPwd");
      },
      sure() {//跳转个人中心
        this.modalVal = false;
        this.showKey = false;
        this.$router.push("/mine");
      },
    },
    components: {
      "v-dialog": dialog
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .deposit-proxy-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .bank-box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 0.267rem;
      .wh(100%, 1.76rem);
      background: #FFF;
      .icon {
        display: flex;
        align-items: center;
        margin-left: 0.307rem;
        margin-right: 0.467rem;
        .bank {
          .wh(1.28rem, 1.28rem);
        }
      }
      .bank-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        height: 100%;
        .bank-name {
          padding-bottom: 0.1rem;
          .size-color(0.427rem, rgba(51, 51, 51, 1));
          font-weight: 500;
        }
        .bank-num {
          padding-top: 0.1rem;
          .size-color(0.347rem, rgba(153, 153, 153, 1))
        }

      }

    }
    .balance-box {
      .wh(100%, auto);
      background: rgba(255, 255, 255, 1);
      border-bottom: 0.027rem solid rgba(245, 245, 245, 1);
      .title {
        display: flex;
        align-items: center;
        .wh(100%, 1.067rem);
        padding-left: 0.32rem;
        .size-color(0.373rem, rgba(255, 83, 83, 1));
      }
      .money-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 0.3rem;
        margin-right: 0.373rem;
        height: 1.067rem;
        .size-color(0.64rem, rgba(27, 27, 27, 1));
        border-bottom: 0.027rem solid #F2F2F2;
        .icon {
          color: #3CAFFF;
        }
        .money {
          width: 80%;
          display: flex;
          align-items: center;
          line-height: 0.667rem;
          color: #3CAFFF;
          font-weight: 500;
        }
        .del-icon {
          margin-left: auto;
          margin-right: 0.347rem;
          .delete {
            .wh(0.627rem, 0.627rem);
          }
        }
      }
      .withdraw-btn {
        display: flex;
        align-items: center;
        padding-top: 0.267rem;
        .wh(100%, 0.8rem);
        background: #FFF;
        .balance {
          margin-left: 0.373rem;
          .size-color(0.44rem, rgba(153, 153, 153, 1));
        }
        .out {
          color: rgba(255, 102, 102, 1)
        }
        .btn {
          margin-left: auto;
          margin-right: 0.373rem;
          font-size: 0.44rem;
          .total {
            color: rgba(60, 175, 255, 1);
            outline: none;
            background: #FFF;
          }
        }
      }
    }
    .deposit-box {
      padding-top: 0.96rem;
      padding-bottom: 0.76rem;
      text-align: center;
      .wh(100%, 1.28rem);
      .deposit {
        .wh(90.4%, 1.28rem);
        .border-radius(0.16rem);
        .size-color(0.453rem, rgba(255, 255, 255, 1));
        line-height: 1.28rem;
        background: rgba(60, 175, 255, 1);
      }
    }
    .tip-box {
      .wh(9rem, auto);
      margin: 0 auto;
      .size-color(0.373rem, rgba(102, 102, 102, 1));
      P {
        margin-bottom: 0.28rem
      }
      .tip-msg {
        line-height: 0.48rem
      }
    }
    .auth_tx_bck {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 100;
      background-color: rgba(0, 0, 0, 0.5);
      .popup_box {
        margin: 10.54% auto 0;
        .wh(92.53%, auto);
        background: rgba(255, 255, 255, 1);
        border-radius: 0.16rem;
        .popup_top {
          display: flex;
          padding-top: 0.293rem;
          padding-right: 0.293rem;
          margin-left: auto;
          .wh(0.48rem, 0.48rem);
          .close {
            .wh(100%, 100%)
          }
        }
        .pop_u_box {
          margin-bottom: 0.2rem;
          .wh(100%, auto);
          color: rgba(27, 27, 27, 1);
          .pop_f {
            display: flex;
            justify-content: center;
            margin-bottom: 0.32rem;
            .size-color-weight(0.48rem, rgba(51, 51, 51, 1), 500);
          }
          .pop_moy {
            margin: 0 auto;
            .wh(6.467rem, auto);
            line-height: 0.48rem;
            .size-color(0.4rem, rgba(153, 153, 153, 1));
          }
        }
        .pop_mpb {
          margin: 0 auto;
          .wh(90%, 1.333rem);
          border: 1px solid rgba(224, 224, 224, 1);
          .p_m_list {
            float: left;
            .wh(16.35%, 100%);
            border-right: 1px solid rgba(224, 224, 224, 1);
            &:last-child {
              border-right: 0rem;
            }
          }
          .mmdd {
            display: inline-block;
            background: #FFF url("../../images/dark.jpg") center no-repeat;
            background-size: 25%;
          }
        }
        .pop_moy {
          padding-top: 0.4rem;
          padding-bottom: 0.4rem;
          text-align: center;
          .size-color(0.44rem, #3CAFFF);
        }
      }
      .numb_box {
        position: fixed;
        bottom: 0;
        .wh(100%, auto);
        background: #f5f5f5;
        .xia_q_tb {
          display: table;
          text-align: center;
          margin: 0 auto;
          padding: 0.067rem 0rem;
          border-top: 1px solid #dadada;
          .pull {
            width: 0.533rem;
            height: 0.333rem;
            margin-top: 0.183rem;
          }
        }
        .nub_ggg {
          border-top: 1px solid #dadada;
          width: 100%;
          margin-top: 0.133rem;
          overflow: hidden;
          li {
            width: 33.33%;
            border-bottom: 1px solid #dadada;
            float: left;
            text-align: center;
            font-size: 0.426666rem;
            a {
              display: block;
              color: #000;
              height: 1.2rem;
              line-height: 1.2rem;
              overflow: hidden;
              &:active {
                background: #e0e0e0;
              }
              &:nth-child(1) {
                border-right: 1px solid #dadada;
              }
            }
          }
        }
      }
    }
  }

</style>


